<template>
	<view>
		<view class="logo d-flex j-center"> </view>
		<ul class="user_form">
			<li>
				<text class="form_lable">账号</text>
				<u-input class="input_txt" maxlength="11" placeholder="请输入账号" border="none" v-model="userData.userCode"
					type="text" />
			</li>
			<li>
				<text class="form_lable">密码</text>
				<u-input class="input_txt" placeholder="请输入密码" border="none" v-model="userData.userPassword" type="password" />
			</li>
			<view class="user_login">
				<view @click="login" :class="[
            'login_btn',
            !userData.userCode || !userData.userPassword ? 'isDisabled' : '',
          ]">登 录</view>
			</view>
			<view class="login_option d-flex j-sb">
				<text @click="connectionMethoed">联系方式</text>
			</view>
		</ul>
	</view>
</template>

<script>
	import Md5 from '@/untils/md5.js'
	export default {
		data() {
			return {
				userData: {
					userCode: '',
					userPassword: '',
				},
			}
		},
		onLoad(v) {},
		onShow() {},
		mounted() {},
		methods: {
			login() {
				if (!this.userData.userCode || !this.userData.userPassword) {
					uni.showToast({
						title: '请输入账号或密码',
						icon: 'none',
					})
					return
				}
				this.$api
					.login({
						...this.userData,
						userPassword: Md5.hex_md5(this.userData.userPassword),
					})
					.then(res => {
						console.log(res, 123)

						if (res.code == 200) {
							uni.setStorageSync('token', res.data.token)
							uni.setStorageSync('userInfo', JSON.stringify(res.data.userInfo))
							uni.showToast({
								title: '登录成功',
								icon: 'none',
							})
							uni.switchTab({ url: '/pages/index/index' })
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
							})
						}
					})
			},
			creatUser() {
				this.$api
					.addUser({
						userName: '赵坤',
						userCode: '13483080612',
						userPassword: Md5.hex_md5('0612'),
					})
					.then(res => {})
			},
			connectionMethoed() {},
		},
	}
</script>

<style scoped lang="scss">
	.logo {
		width: 100%;
		height: 528upx;
		background: url("https://public-test-shengtong.oss-cn-zhangjiakou.aliyuncs.com/yixiao_h5/login_bg.png") no-repeat;
		background-size: 100%;
	}

	.user_form {
		margin: 0px 48upx;

		li {
			display: flex;
			align-items: center;
			height: 100upx;
			border-bottom: 2upx solid #f1f1f1;

			.form_lable {
				margin-right: 40upx;
				width: 90rpx;
				flex-shrink: 0;
				color: #666666;
				font-size: 30upx;
			}

			.input_txt {
				width: 100%;
				color: #222222;
			}

			.code_txt {
				width: 150upx;
				text-align: right;
				flex-shrink: 0;
				margin-left: 10upx;
				font-size: 26upx;
				color: #bababa;
			}

			.get_code {
				color: #4083fe;
			}
		}
	}

	.user_login {
		margin-top: 104rpx;

		.login_btn {
			line-height: 84rpx;
			background: #4083fe;
			border-radius: 16rpx;
			font-size: 32rpx;
			text-align: center;
			color: #fff;
			font-weight: 500;
		}

		.isDisabled {
			background: rgba(64, 131, 254, 0.3) !important;
		}
	}

	.login_option {
		margin-top: 40rpx;
		color: #4083fe;
		font-size: 26rpx;
	}

	.login_icon {
		width: 232upx;
		height: 72upx;
		margin-top: 272upx;
	}
</style>
<style>
	page {
		background: #fff;
	}
</style>